import React, { useEffect, useState } from 'react';

import { Button, Col, message, Row, Table } from 'antd';
import { withRouter } from 'umi';

import { BottomAction } from '@/components';
import { useRequest } from '@/hooks';
import EmployeeCard from '@/pages/EntryManage/components/EmployeeCard';
import useCandidateProcess from '@/pages/EntryManage/hooks/useCandidateProcess';

import Card from '../components/Card';
import { getPropertyList, releaseMaterial } from '../services';
import { replaceToWaitEntry } from '../utils';
import styles from './index.less';

// 入职环节5;
const PROCESS_STATUS = 6;

/**
 * 办公用品发放
 * @param {Object} form
 */
const OfficeGoods = ({ location }) => {
    const [dataSource, setDataSource] = useState([]);
    const { query = {} } = location;
    const { entryPersonnelCode } = query;

    const user = JSON.parse(localStorage.getItem('user') || '{}');
    const { employeeCode } = user;

    const canAction = useCandidateProcess(entryPersonnelCode, PROCESS_STATUS, employeeCode);

    const fetchOfficeAssetInstSuccess = result => {
        const { code, data, msg } = result;
        if (code === 10000) {
            setDataSource(data);
        } else {
            message.error(msg);
        }
    };

    // 获取办公用品列表
    const { run: getOfficeAssetInst, loading: loadingOfficeAssetInst } = useRequest(code => getPropertyList(code), {
        manual: true,
        onSuccess: fetchOfficeAssetInstSuccess
    });

    // 确认
    const { run: getReleaseMaterial, loading: loadingReleaseMaterial } = useRequest(
        () => releaseMaterial({ currentHandlerEmployeeCode: employeeCode, entryPersonnelCode }),
        {
            manual: true
        }
    );

    const columns = [
        {
            title: '名称',
            dataIndex: 'assetName',
            render: text => text || '--'
        },
        {
            title: '资产型号',
            dataIndex: 'modelName',
            render: text => text || '--'
        },
        {
            title: '资产类型',
            dataIndex: 'assetType',
            render: text => (text !== '' ? <span>{text === 0 ? '固定资产' : '消耗品'}</span> : '--')
        },
        {
            title: '资产编号',
            dataIndex: 'assetNumber',
            render: text => text || '--'
        },
        {
            title: '数量',
            dataIndex: 'required',
            width: 100,
            render: text => <span>{text || '--'}</span>
        }
    ];

    // 获取发放办公用品数据
    useEffect(() => {
        if (entryPersonnelCode) {
            getOfficeAssetInst(entryPersonnelCode);
        } else {
            message.error('参数错误');
            replaceToWaitEntry('参数错误');
        }
    }, [entryPersonnelCode, getOfficeAssetInst]);

    const handleClick = async () => {
        const { code, msg } = await getReleaseMaterial();
        if (code === 10000) {
            message.success(msg);
            replaceToWaitEntry();
        } else {
            message.error(msg);
        }
    };

    return (
        <div className={styles.officeGoodsWrapper}>
            <div className={styles.employeeInfo}>
                <div className={styles.employeeInfoBox}>
                    <EmployeeCard employeeCode={entryPersonnelCode} />
                </div>
            </div>
            <Card
                title="发放用品"
                headBorder
                bordered={false}
                extra={
                    canAction && (
                        <BottomAction>
                            <span className={styles.autoNotice}>自行通知部门负责人</span>
                            <Button
                                onClick={() => {
                                    replaceToWaitEntry();
                                }}
                            >
                                取消
                            </Button>
                            <Button
                                type="primary"
                                loading={loadingReleaseMaterial || loadingOfficeAssetInst}
                                onClick={handleClick}
                            >
                                确定
                            </Button>
                        </BottomAction>
                    )
                }
            >
                <div className={styles.officeGoods}>
                    <Row>
                        <Col span={24}>
                            <p>请确认已发放如下资产：</p>
                            <Table
                                rowKey="id"
                                loading={loadingOfficeAssetInst}
                                columns={columns}
                                dataSource={dataSource}
                                bordered
                                pagination={false}
                            />
                        </Col>
                    </Row>
                </div>
            </Card>
        </div>
    );
};

export default withRouter(OfficeGoods);
